<template>
    <!-- 滚动区域开始 -->
    <view class="container">
        <z-paging
            ref="paging"
            v-model="messageList"
            :scroll-with-animation="true"
            :default-page-size="messageListParams.page_size"
            @query="handlerPullRefreshAndMore"
            @scroll="handleScroll"
        >
            <!-- 骨架屏区域开始 -->
            <view class="skeleton-wrap" v-for="(index) in 10" :key="index" v-if="isSkeleton">
                <uv-skeletons :loading="true" :skeleton="skeletons"></uv-skeletons>
            </view>
            <!-- 骨架屏区域结束 -->

            <template #top>
                <TridentDropdown
                    :filterList="filterList"
                    @selectFilterTabs="handleSelectFilterTabs"
                    @changeFilter="changeFilter"
                    @confirm="handleConfirm"
                    @reset="handleReset"
                >
                    <template #default>
                        <view class="filter-form">
                            <uni-forms label-width="100">
                                <!-- 开始日期 -->
                                <uni-forms-item label="开始日期">
                                    <uni-datetime-picker type="date" v-model="messageListParams.start_create_time"/>
                                </uni-forms-item>

                                <!-- 结束日期 -->
                                <uni-forms-item label="结束日期">
                                    <uni-datetime-picker type="date" v-model="messageListParams.end_create_time"/>
                                </uni-forms-item>
                            </uni-forms>
                        </view>
                    </template>
                </TridentDropdown>
            </template>

            <!-- 列表区域开始 -->
            <view class="list-wrap">
                <view class="record-item" v-for="(item, index) in messageList" :key="index">
                    <!-- 标题区域开始 -->
                    <view class="title-box">
                        <image
                            :src="item.from_user?.avatar_url ? global.FILE_DOMAIN + item.from_user?.avatar_url : '/static/images/default_avatar.png'"
                        />
                        <view class="username">{{ item.from_user?.username }}</view>
                    </view>
                    <!-- 标题区域结束 -->

                    <!-- 内容区域开始 -->
                    <view class="content-box">
                        <view class="text" v-if="item.type == 1">{{ item.contents }}</view>
                        <view class="image-panel" v-else-if="item.type == 2">
                            <image
                                :src="global.FILE_DOMAIN + item.image_url"
                                @click="handleShowImagePreview(global.FILE_DOMAIN + item.image_url)"
                            />
                        </view>
                        <view class="text" v-else-if="item.type == 3">
                            【语音】
                        </view>
                        <view class="text" v-else-if="item.type == 4">
                            【视频】
                        </view>
                        <view class="text" v-else-if="item.type == 5">
                            【位置】
                        </view>
                    </view>
                    <!-- 内容区域结束 -->
                    <view class="time">{{ item.create_time }}</view>
                </view>
            </view>

            <!-- 加载更多提示 -->
            <template #loadingMoreNoMore>
                <view :style=" safeAreaInsets && safeAreaInsets.bottom > 0 ? 'padding-bottom: ' + safeAreaInsets.bottom + 'px': ''" class="no-more-wrap" v-if="totalPage <= messageListParams.page && totalPage > 1">我也是有底线的！</view>
            </template>
        </z-paging>
    </view>
    <!-- 滚动区域结束 -->

    <!-- 返回顶部 -->
    <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
</template>

<script lang="ts" setup>
import { reqMessageListAPI } from '@/apis/message'
import { useUserStore } from '@/stores'
import type { Message, MessageListParam } from '@/types/chat'
import type { Filter } from '@/types/global'
import { inject, reactive, ref } from 'vue'



// --------------- 定义全局变量开始 ---------------
const paging = ref()

// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 获取页面参数
const query = defineProps({
    "mode": {
        type: String,
        default: '0'
    },
    "to_uid": {
        type: String,
        default: '0'
    }
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// --------------- 定义全局变量结束 ---------------



// --------------- 全局筛选变量开始 ---------------
// 筛选数据
const filterList = ref<Filter[]>([
    {
        name: '全部',
        type: 'filter',
        children: [
            {
                name: '全部',
                value: 0
            },
            {
                name: '文本',
                value: 1
            },
            {
                name: '图片',
                value: 2
            },
            {
                name: '语音',
                value: 3
            },
            {
                name: '视频',
                value: 4
            },
            {
                name: '位置',
                value: 5
            }
        ]
    },
    {
        name: '时间倒序',
        type: 'sort',
        children: [
            {
                name: '时间倒序',
                value: 0
            },
            {
                name: '时间升序',
                value: 1
            }
        ]
    },
    {
        name: '筛选',
        type: 'complex_filter',
        children: [
            {
                name: '开始日期',
                field: 'start_create_time',
                value: ''
            },
            {
                name: '结束日期',
                field: 'end_create_time',
                value: ''
            }
        ]
    }
])

const handleSelectFilterTabs = () => {
    isShowBackTop.value = false
}
// --------------- 全局筛选变量结束 ---------------



// --------------- 下拉筛选功能开始 ---------------
const changeFilter = (option: any) => {
    if (option.type == 'filter') {
        messageListParams.type = option.value
    } else if (option.type == 'sort') {
        if (option.value == 0) { // 时间倒序
            messageListParams.sort_field = 'create_time'
            messageListParams.sort_type = 'desc'
        } else if (option.value == 1) { // 时间升序
            messageListParams.sort_field = 'create_time'
            messageListParams.sort_type = 'asc'
        }
    }

    // clearQueryParams()
    
    messageListParams.page = 1
	messageList.value = []
	// 当tab切换或搜索时，可以通过paging.value.reload()刷新整个列表
    paging.value.reload()
}
// --------------- 下拉筛选功能结束 ---------------



// --------------- 综合筛选功能开始 ---------------
// 处理重置
const handleReset = async () => {
    messageListParams.start_create_time = ''
    messageListParams.end_create_time = ''
}

// 处理确认
const handleConfirm = async () => {
    // 判断时间
    if (messageListParams.start_create_time && messageListParams.end_create_time) {
        if (messageListParams.start_create_time > messageListParams.end_create_time) {
            uni.showToast({
                title: '开始日期不能大于结束日期',
                duration: 1000,
                icon: 'none'
            })

            return false
        }
    }

    messageList.value = []
    messageListParams.page = 1

    // 当tab切换或搜索时，可以通过paging.value.reload()刷新整个列表
    paging.value.reload()
}
// --------------- 综合筛选功能结束 ---------------



// ------------下拉刷新 + 加载更多开始 ------------
const handlerPullRefreshAndMore = async (pageNo: number, pageSize: number) => {
    messageListParams.page = pageNo
    await getMessageList()
}
// ------------下拉刷新 + 加载更多结束 ------------



// ------------- 处理消息列表功能开始 -------------
// 消息列表参数
const messageListParams = reactive<MessageListParam>({
    from_uid: query.mode == '1' ? userStore.profile.user?.uid : 0,
    to_uid: query.to_uid as never,
    is_dialogue: query.mode == '1' ? 1 : 0,
    mode: query.mode as never,
    type: 0,
    page: 1,
    page_size: 10,
    sort_field: 'create_time',
    sort_type: 'desc',
    start_create_time: '',
    end_create_time: ''
})

// 消息列表
const messageList = ref<Message[]>([])

// 总条数
const total = ref<number>(0)

// 总页数
const totalPage = ref<number>(0)

// 获取消息列表
const getMessageList = async () => {
    if (messageListParams.page == 1) {
        isSkeleton.value = true
    }

    // 请求数据
    const result = await reqMessageListAPI(messageListParams)
    total.value = result.data.total
    totalPage.value = result.data.total_page
    paging.value.complete(result.data.messages)
    
    // 隐藏骨架
    isSkeleton.value = false
}
// ------------- 处理消息列表功能结束 -------------



// --------------- 处理图片预览开始 ---------------
const handleShowImagePreview = (image_url: string) => {
    uni.previewImage({
		urls: [image_url]
	})
}
// --------------- 处理图片预览结束 ---------------



// --------------- 返回顶部功能开始 ---------------
// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
  paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
  isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// --------------- 返回顶部功能结束 ---------------



// --------------- 定义骨架变量开始 ---------------
// 定义是否显示骨架
const isSkeleton = ref(false)

// 定义骨架参数
const skeletons = reactive([
    // 标题区域
    {
        type: 'flex',
        num: 1,
        style: 'border-radius: 20rpx;align-items: center;',
        children: [
            // 标题区域
            {
            type: 'custom',
            num: 1,
            style: ['width: 90rpx;height: 90rpx;border-radius: 45rpx;']
            },

            // 文本区域
            {
            type: 'custom',
            num: 1,
            style: ['width: 122rpx;height: 38rpx;margin-left: 10rpx;']
            }
        ]
    },

    20,

    // 分割线
    {
      type: 'custom',
      num: 1,
      style: ['width: 100%;height: 2rpx;']
    },

    20,

    // 内容区域
    {
        type: 'line',
        num: 2,
        gap: '10rpx',
        style: ['width: 200rpx;', 'width: 400rpx;']
    },

    20,

    // 时间区域
    {
      type: 'flex',
      num: 1,
      style: 'justify-content: flex-end;',
      children: [
            {
                type: 'custom',
                num: 1,
                style: ['width: 200rpx;height: 38rpx;']
            }
        ]
    }
])
// --------------- 定义骨架变量结束 ---------------
</script>

<style scoped lang="scss">
.container {
    // 筛选项区域开始
    .filter-tab-wrap {
        background-color: #fff;
        border-bottom: 2rpx solid #ccc;
        display: flex;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        z-index: 100;

        .filter-tab-item {
            flex: 1;

            .filter-tab-txt {
                margin-right: 10rpx;
            }
            .icon {
                font-size: 24rpx;
                color: #ccc;
            }

            .active {
                color: $uni-color-primary;
            }
        }
    }

    // 筛选内容区域开始
    .filter-wrap {
        background-color: rgba(0, 0, 0, 0.7);
        height: 100vh;
        transition: all 0.7s;
        position: relative;
        .filter-box {
            background-color: #fff;
            // 下拉明细区域
            .filter-item {
                height: 80rpx;
                line-height: 80rpx;
                margin: 0 20rpx;
                border-bottom: 2rpx solid #f3f3f3;

                display: flex;
                justify-content: space-between;
                .filter-txt {
                    font-size: 24rpx;
                }
                &:last-child {
                    border-bottom: none;
                }
            }

            // 激活
            .actived {
                color: $uni-color-primary;
            }

            // 表单区域
            .filter-form {
                padding: 30rpx 25rpx 0 25rpx;
                border-bottom: 2rpx solid #e4e2e2;
            }

            // 按钮区域
            .filter-btn {
                display: flex;
                justify-content: space-evenly;
                padding-bottom: 20rpx;
            }
        }
    }
    // 筛选区域结束

    // 列表区域开始
    .list-wrap {
        padding: 0 20rpx;
        margin-bottom: 20rpx;

        // 记录明细区域开始
        .record-item {
            background-color: #fff;
            padding: 30rpx;
            border-radius: 20rpx;
            margin-top: 10rpx;

            // 标题区域开始
            .title-box {
                display: flex;
                align-items: center;
                padding-bottom: 12rpx;
                border-bottom: 2rpx solid #f1f1f1;
                .username {
                    font-size: 28rpx;
                    color: #acabab;
                    margin-left: 10rpx;
                }
                image {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 40rpx;
                    border: 2rpx solid #e8e7e7;
                }
            }

            // 内容区域开始
            .content-box {
                line-height: 44rpx;
                font-size: 30rpx;
                padding-top: 12rpx;
                .image-panel {
                    width: 120rpx;
                    height: 120rpx;
                    border: 2rpx solid #efeeee;
                    display: flex;
                    align-content: center;
                    justify-content: center;
                    border-radius: 10rpx;
                    overflow: hidden;
                    image {
                        width: 120rpx;
                        height: 120rpx;
                    }
                }
            }
            .time {
                display: flex;
                justify-content: flex-end;
                padding-top: 20rpx;
                font-size: 28rpx;
                color: #acabab;
            }
        }
    }

    // 没有更多数据区域
    .no-more-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;
        color: #c3c0c0;
    }

    // 骨架屏区域开始
    .skeleton-wrap {
        background-color: #fff;
        margin: 10rpx 20rpx;
        padding: 30rpx;
        border-radius: 20rpx;
    }
    // 骨架屏区域结束
}
</style>